class Zoom{
    constructor(){
        //获取元素
        this.mask = document.querySelector('.pic>span')
        this.big_box = document.querySelector('.right')
        this.small_box = document.querySelector('.pic')
        //调用初始化方法
        this.init()
    }
    init(){
        this.over()
        this.out()
        this.move()
    }
    over(){
        this.small_box.onmouseover = ()=>{
            this.mask.style.display = 'block'
            this.big_box.style.display = 'block'
        }
    }
    out(){
        this.small_box.onmouseout = ()=>{
            this.mask.style.display = 'none'
            this.big_box.style.display = 'none'
        }
    }
    move(){
        //给small_box绑定移动事件
        this.small_box.onmousemove = (e)=>{
            let x = e.clientX - this.mask.offsetWidth/2 - this.small_box.offsetLeft
            let y = e.clientY - this.mask.offsetHeight/2 - this.small_box.offsetTop
            //判断边界值
            if(x<=0){
                x = 0
            }else if(x>=this.small_box.offsetWidth - this.mask.offsetWidth){
                x = this.small_box.offsetWidth - this.mask.offsetWidth
            }
            if(y<=0){
                y = 0
            }else if(y>=this.small_box.offsetHeight - this.mask.offsetHeight){
                y = this.small_box.offsetHeight - this.mask.offsetHeight
            }
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            //计算比例
            let w = x / (this.small_box.offsetWidth - this.mask.offsetWidth)
            let h = y / (this.small_box.offsetHeight - this.mask.offsetHeight)
            //给大图设置偏移量
            this.big_box.children[0].style.left = -w * (this.big_box.children[0].offsetWidth - this.big_box.offsetWidth) + 'px'
            this.big_box.children[0].style.top = -h * (this.big_box.children[0].offsetHeight - this.big_box.offsetHeight) + 'px'
        }
    }
}
new Zoom()